<template>
	<div>
		<div class="lick-list">
			<div class="title">
				<img src="/api/img/xin.png" />
				<span>猜你喜欢</span>
			</div>
			<div class="list">
				<ul>
					<li v-for="item in lickList" :key="item.id">
						<div class="img" @click="toDetails()">
							<img :src="item.imgUrl" />
						</div>
						<div class="info">
							<h3 @click="toDetails()">{{item.title}}</h3>
							<div class="pinglun">
								<span class="iconfont">&#xe643;&#xe643;&#xe643;&#xe643;</span>
								<span class="pl">{{item.num}}条评论</span>
							</div>
							<div class="price">
								<span class="mpg-price">¥<em class="mpg-price-num">{{item.price}}</em></span>起
								<span class="mp-like-address">{{item.addr}}</span>
							</div>
						</div>
					</li>
				</ul>
			</div>
			
			
		</div>
	</div>
</template>

<script>
export default {
	props:["lickList"],
	data (){
		return {

		}
	},
	methods:{
		toDetails(){
			this.$router.push("./Details")
		}
	}
}
	
	
	
	
</script>

<style>
	.lick-list{
		background: #FFFFFF;
		padding: .1rem;
	}
	
	.lick-list .title{
		font-size: .16rem;
		height: .47rem;
		line-height: .47rem;
	}
	
	.lick-list .title img{
		width: .15rem;
		height: .15rem;
	}
	
	.list li{
		width: 100%;
		height: 1.2rem;
		display: flex;
		font-size: .16rem;
	}
	.list li div.img{
		width: 1rem;
		height: 1rem;
	}
	.list li div.img img{
		width: 100%;
		height: 100%;
	}
	.list li div.info{
		flex: 1;
		padding-left: .1rem;
		padding-top: .1rem;
		
	}
	.list li div.info h3{
		font-weight: normal;
		font-size: .16rem;
	}
	div.info .pinglun{
		padding:.1rem 0;
		font-size: .12rem;
	}
	.pinglun .iconfont{
		color:#ffb436 ;
	}
	.price .mpg-price {
		font-size: .12rem;
		color: #ff8300;
	}
	.price .mpg-price-num{
		font-style: normal;
		font-size: .2rem;
		color: #ff8300;
	}
	
	.mp-like-address{
		float: right;
	}
	
	
	
</style>